<template>
  <div class="box-main">
    <div class="header">
      <div class="header-content">
        <p class="header-content-value">150</p>
        <p class="header-content-label">成长值</p>
      </div>
      <div class="header-avatar">
        <img class="header-avatar-img" src="@/assets/images/comm/avatar.png" alt="" />
      </div>
      <div class="header-content">
        <p class="header-content-value">10</p>
        <p class="header-content-label">成长值/天</p>
      </div>
    </div>
    <img class="box-main-icon1" src="@/assets/images/MemberCenter/icon1.png" alt="" />
    <img class="box-main-icon2" src="@/assets/images/MemberCenter/icon2.png" alt="" />
    <div class="card">
      <div class="card-tag">当前等级</div>
      <div class="card-title">
        <p>V1</p>
        <p class="m-l-1-03">尊享会员</p>
      </div>
      <div class="card-time">有效期至: 2024.03.56</div>
      <div class="card-flex-text">
        <p>当前经验 1102</p>
        <p>还差98升级</p>
      </div>
      <div class="card-progress">
        <p class="card-progress-bar"></p>
        <p class="card-progress-bar-inner" :style="{ width: `${width}%` }"></p>
      </div>
    </div>
    <div class="box-main-content">
      <p class="box-main-content-name">专属特权</p>
      <img class="box-main-content-icon3" src="@/assets/images/MemberCenter/icon3.png" alt="" />
      <p class="box-main-content-tips">已解锁14项专属奖励</p>
    </div>
    <div class="list">
      <div class="list-item" v-for="v in list" :key="v">
        <img class="list-item-img" :src="getImageUrl(v.img)" alt="" />
        <p class="list-item-label">{{ v.label }}</p>
        <p class="list-item-value">{{ v.value }}</p>
      </div>
    </div>
    <div class="btn">立即续费</div>
  </div>
</template>
<script setup>
const getImageUrl = (name) => {
  return new URL(`../../assets/images/MemberCenter/${name}`, import.meta.url).href
}
const width = 80;

const list = [
  { label: '高级漂屏', value: 'VIP专属', img: 'icon4.png' },
  { label: '商店免费刷新', value: '+1次', img: 'icon5.png' },
  { label: '每日普通材料', value: 'x80', img: 'icon6.png' },
  { label: '稀有服装宝箱', value: 'x1', img: 'icon7.png' },
]
</script>
<style lang="scss" scoped>
.box-main {
  width: 100%;
  min-height: 100vh;
  background: #13071B;
  padding: 7.69rem 5.64rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-around;

    &-avatar {
      width: 17.95rem;
      height: 17.95rem;
      border-radius: 27.95rem 27.95rem 27.95rem 27.95rem;
      border: 0.51rem solid #B3B3B3;

      &-img {
        width: 17.95rem;
        height: 17.95rem;
        border-radius: 27.95rem 27.95rem 27.95rem 27.95rem;
      }
    }

    &-content {
      text-align: center;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;

      &-value {
        font-size: 3.59rem;
        color: #FFFFFF;
        line-height: 3.59rem;
      }

      &-label {
        font-size: 3.08rem;
        color: rgba(255, 255, 255, 0.5);
        line-height: 3.08rem;
        margin-top: 1.54rem;
      }
    }

  }

  &-icon1 {
    width: 87.69rem;
    height: 14.87rem;
    display: block;
    margin-top: 1.03rem;
  }

  &-icon2 {
    width: 29.23rem;
    height: 25.64rem;
    display: block;
    position: absolute;
    top: 45rem;
    right: 7.13rem;
    z-index: 1;
  }

  .card {
    padding: 7.44rem 5.13rem;
    margin-top: 11.03rem;
    box-sizing: border-box;
    background-image: url('@/assets/images/MemberCenter/icon8.png');
    background-size: 100% 34.1rem;
    background-repeat: no-repeat;
    position: relative;

    &-tag {
      background: linear-gradient(180deg, #FAE3BD 0%, #E5BCA5 99%);
      border-radius: 3.08rem 0rem 2.31rem 0rem;
      padding: 0.77rem 2.82rem;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 2.56rem;
      color: #333333;
      line-height: 2.56rem;
      position: absolute;
      top: 0;
      left: 0;
    }

    &-title {
      font-family: DingTalk JinBuTi, DingTalk JinBuTi;
      font-weight: 400;
      font-size: 6.15rem;
      line-height: 6.15rem;
      background: linear-gradient(90deg, #E4CFC0 0%, #FFEFE5 34%, #D1B5A6 60%, #F8E7D5 89%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      display: flex;
      align-items: center;

      .m-l-1-03 {
        margin-left: 1.03rem;
      }
    }

    &-time {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 2.56rem;
      color: rgba(242, 203, 189, 0.5);
      line-height: 2.56rem;
      margin-top: 1.54rem;
    }

    &-flex-text {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 3.08rem;
      color: #F2CBBD;
      line-height: 3.08rem;
      margin-top: 5.64rem;
    }

    &-progress {
      width: 100%;
      position: relative;

      &-bar {
        width: 100%;
        height: 0.51rem;
        background: #3C3744;
        border-radius: 25.9rem;
        margin-top: 3.08rem;
      }

      &-bar-inner {
        position: absolute;
        height: 0.51rem;
        background: #F2CBBD;
        border-radius: 25.9rem;
        top: 0;
      }
    }
  }

  &-content {
    margin-top: 5.13rem;
    font-family: PingFang SC, PingFang SC;
    display: flex;
    flex-direction: column;
    align-items: center;

    &-name {
      font-weight: 500;
      font-size: 4.62rem;
      color: #F2CBBD;
      line-height: 4.62rem;
    }

    &-icon3 {
      width: 19.74rem;
      height: 2.56rem;
      display: block;
      margin: 2.05rem 0;
    }

    &-tips {
      font-weight: 400;
      font-size: 3.59rem;
      color: rgba(242, 203, 189, 0.5);
      line-height: 3.59rem;
    }
  }

  .list {
    display: flex;
    justify-content: space-between;
    margin-top: 4.62rem;
    flex: 1;

    &-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;

      &-img {
        width: 12.31rem;
        height: 12.31rem;
        display: block;
      }

      &-label {
        font-size: 3.08rem;
        color: #F2CBBD;
        line-height: 4.36rem;
        margin-top: 3.08rem;
      }

      &-value {
        font-size: 2.56rem;
        color: rgba(242, 203, 189, 0.5);
        line-height: 3.59rem;
        margin-top: 0.51rem;
      }
    }
  }

  .btn {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1.79rem;
    width: 81.03rem;
    height: 12.31rem;
    margin-top: 13rem;
    background: linear-gradient(180deg, #483D4E 2%, #483D4E 10%, #201B29 100%);
    border-radius: 34.1rem 34.1rem 34.1rem 34.1rem;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 3.59rem;
    color: #F2CBBD;
    line-height: 12.31rem;
    text-align: center;
  }
}
</style>